<template>
  <div>
    <div class="container">
      <div class="forms-container">
        <div class="signin-signup">
          <form action="#" class="sign-in-form">
            <h2 class="title">登录</h2>
            <div class="input-field">
              <i class="fas fa-user"></i>
              <input type="text" placeholder="用户名" v-model="uname" />
            </div>
            <div class="input-field">
              <i class="fas fa-lock"></i>

              <input type="password" placeholder="密码" v-model="password" />
            </div>
            <input value="登 录" class="btn solid" type="button" @click.prevent="dosubmit" />
            <p class="social-text">或者通过以下平台登录</p>
            <div class="social-media">
              <a href="#" class="social-icon">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-qq"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-alipay"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-github"></i>
              </a>
            </div>
          </form>
          <form action="#" class="sign-up-form">
            <h2 class="title">注册</h2>
            <div class="input-field">
              <i class="fas fa-user"></i>
              <input type="text" placeholder="注册用户名" v-model="reg_name" />
            </div>

            <div class="input-field">
              <i class="fas fa-lock"></i>
              <input type="password" placeholder="密码" v-model="reg_pass" />
            </div>
            <input type="button" class="btn" value="注 册" @click.prevent="upload_photo" />
            <p class="social-text">或者通过以下平台注册</p>
            <div class="social-media">
              <a href="#" class="social-icon">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-qq"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-alipay"></i>
              </a>
              <a href="#" class="social-icon">
                <i class="fab fa-github"></i>
              </a>
            </div>
          </form>
        </div>
      </div>

      <div class="panels-container">
        <div class="panel left-panel">
          <div class="content">
            <h3>新用户?</h3>
            <p>你来了,我们的系统就差你的加入了,点击下方注册按钮加入我们吧</p>

            <button class="btn transparent" id="sign-up-btn">注册</button>
          </div>
          <img src="../access/img/log.svg" class="image" alt />
        </div>
        <div class="panel right-panel">
          <div class="content">
            <h3>已经有账号了吗?</h3>
            <p>那你直接点击登录按钮,登录到我们这优秀的系统里!!</p>

            <button class="btn transparent" id="sign-in-btn">登 录</button>
          </div>
          <img src="../access/img/register.svg" class="image" alt />
          <!-- <img src="../access/img/car.jpg" alt=""> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import qs from "qs";
import php from '../api/php.js';
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      uname: "",
      password: "",
      reg_name: "",
      reg_pass: "",
      reg_file: ""
    };
  },
  methods: {
    ...mapMutations(["USER_LOGIN"]),
    dosubmit() {
      //判断用户名和密码是否为空
      if (this.uname == "" || this.password == "") {
        const that = this;
        that.$message({
          type: "error",
          message: "用户名或密码不能为空"
        });
        return;
      }
      //判断用户名是否合法
      const reg = /^[a-zA-Z0-9_]{3,16}$/;
      if (!reg.test(this.uname)) {
        const that = this;
        that.$message({
          type: "error",
          message: "用户名不合法"
        });
        return;
      }

      // let params = {
      //   uname: this.uname,
      //   password: this.password
      // };

      let formData = new FormData();
      formData.append("uname", this.uname);
      formData.append("password", this.password);

      let url = php+"login.php";
      // let str = qs.stringify(params);
      this.$axios
        .post(url, formData)
        .then(res => {
          // console.log(res.data);
          this.USER_LOGIN(res.data);
          if (res.data.code == 200) {
            const that = this;
            that.$message({
              type: "success",
              message: "登录成功"
            });

            //跳转到首页
            that.$router.push("/");
            return;
          } else {
            const that = this;
            that.$message({
              type: "error",
              message: "登录失败,用户名或密码错误"
            });
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    upload_photo: function(event) {
      var that = this;
      //阻止事件冒泡
      event.stopPropagation();
      let formData = new FormData();
      formData.append("reg_name", this.reg_name);
      formData.append("reg_pass", this.reg_pass);
      // 判断用户名或密码是否为空
      if (this.reg_name == "" || this.reg_pass == "") {
        that.$message({
          type: "error",
          message: "用户名或密码不能为空"
        });
        return;
      }

      let url1 = php+"register.php";
      // let str = qs.stringify(params);
      that.$axios.post(url1, formData)
        .then(res => {
          // console.log(res.data);
          if (res.data.code == 200) {
            //弹窗提示注册成功
            that.$message({
              type: "success",
              message: "注册成功"
            });
            setTimeout(function() {
            window.location.reload();
            },1500)
            // 刷新页面
             
          
            that.$router.push("/login");
            return;
          } else if (res.data.code == 1) {
            //弹窗提示用户名已存在
            that.$message({
              type: "warning",
              message: "用户名已存在"
            });
            //判断用户是否多次输入相同的用户名，如果是，则提示用户重新输入，将用户名清空
            return;
          } else {
            //弹窗提示注册失败
            that.$message({
              type: "error",
              message: "注册失败"
            });
            return;
          }
          // that.reg_file = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    const sign_in_btn = document.querySelector("#sign-in-btn");
    const sign_up_btn = document.querySelector("#sign-up-btn");
    const container = document.querySelector(".container");

    sign_up_btn.addEventListener("click", () => {
      container.classList.add("sign-up-mode");
    });

    sign_in_btn.addEventListener("click", () => {
      container.classList.remove("sign-up-mode");
    });
  }
};
</script>
<style scoped>
@import url('../access/font-awesome.min.css');

@import url("../access/login.css");
</style>